import { addEmployeeApi, getEmployeeDetailApi, updateEmployeeApi } from "@/api/employee";
import { addEmployeeData } from "@/types/employee";
import { message } from "@/utils/AntdGlobal";
import { Card, FormProps, Radio } from "antd";

export function Component() {
  // 获取表单
  const [form] = Form.useForm();
  const navigate = useNavigate();
  // 获取传过来的id
  const [params] = useSearchParams();
  const employeeId = params.get('id')
  const onFinish: FormProps<addEmployeeData>['onFinish'] = async (values) => {
    if (employeeId) {
      await updateEmployeeApi({ ...values, id: +employeeId! })
      message.success('修改成功')
    } else {
      await addEmployeeApi(values)
      message.success('添加成功')
    }
    navigate(-1)
  };
  // 获取路由
  useEffect(() => {
    const getEmployeeDetail = async () => {
      const res = await getEmployeeDetailApi(+employeeId!)
      form.setFieldsValue({
        ...res.data
      })
    }
    if (employeeId) {
      getEmployeeDetail()
    }
  }, [])

  return (
    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
      {/* 查询 */}
      <Card className="mb-4" size="small">
        <div className="flex flex-justify-between flex-items-center">
          <div className="font-bold font-size-4">{employeeId ? '修改员工' : '添加员工'}</div>
          <Button type="primary" onClick={() => navigate(-1)}>
            返回
          </Button>
        </div>
      </Card>
      {/* 表格 */}
      <Card style={{ overflow: 'auto', height: '100%' }}>
        <div className="flex flex-justify-center">
          <Form
            name="basic"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            style={{ minWidth: 800 }}
            initialValues={{ sex: '1' }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item<addEmployeeData>
              label="账号"
              name="username"
              rules={[{ required: true, message: '请输入账号!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item<addEmployeeData>
              label="员工姓名"
              name="name"
              rules={[{ required: true, message: '请输入员工姓名!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item<addEmployeeData>
              label="手机号"
              name="phone"
              rules={[{ required: true, message: '请输入手机号!' }, { pattern: /^1[3-9][0-9]{9}$/, message: '请正确手机号!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item<addEmployeeData>
              label="性别"
              name="sex"
            >
              <Radio.Group>
                <Radio value="1"> 男 </Radio>
                <Radio value="0"> 女 </Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item<addEmployeeData>
              label="身份证号"
              name="idNumber"
              rules={[{ required: true, message: '请输入身份证号!' }, { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请正确身份证号!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item wrapperCol={{ span: 24 }}>
              <div className="flex flex-justify-center mr-8">
                <Button type="default" onClick={() => navigate(-1)} className="mr-8">
                  取消
                </Button>
                <Button type="primary" htmlType="submit">
                  {employeeId ? "修改" : '添加'}
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </Card >
    </div >
  )
}